/**
 * Created by wei on 17/12/3.
 */

import React, { Component } from 'react';
import axios from 'axios';
import PropTypes from 'prop-types';
import './pager.css'


class Pager extends Component{
    constructor(props){
        super(props);

        this.state = {
            pageInfo: {
                pageNumber:3,
                pageSize:10,
                totalPages:20,
                totalElements:0,
                last:false,
                first:false,
                size:0,
            },

        };
    }

    componentWillReceiveProps(nextProps){
        const {pageInfo} = nextProps;
        this.setState({
            pageInfo: pageInfo,
        });
    }

    goToPage(p){
        const {pageChange} = this.props;
        pageChange(p);
    }

    showPages(){
        let pageSize = this.state.pageInfo.pageSize;
        //后台分页从0开始
        let pageNumber = this.state.pageInfo.pageNumber+1;
        let totalPages = this.state.pageInfo.totalPages;
        let totalElements = this.state.pageInfo.totalElements;
        let first = this.state.pageInfo.first;
        let last = this.state.pageInfo.last;
        var dynamicPages = [];
        if(totalPages <= 10){
            for(var i=1; i<= totalPages; i++){
                dynamicPages.push(i);
            }
        }else{
            if(pageNumber <= 4){
                dynamicPages = [1,2,3,4,5,6,7];
            }else if(pageNumber >= totalPages-3){
                dynamicPages = [totalPages-6,totalPages-5,totalPages-4,totalPages-3,totalPages-2,totalPages-1,totalPages]
            }else{
                dynamicPages = [pageNumber-3,pageNumber-2,pageNumber-1,pageNumber,pageNumber+1,pageNumber+2,pageNumber+3]
            }
        }

        var that = this;
        let pages = dynamicPages.map(function (v,index,arr) {
            if(v == pageNumber){
                return (<li onClick={()=>that.goToPage(v-1)} className="active"><a href="#">{v}</a></li>);
            }
            return (<li><a onClick={()=>that.goToPage(v-1)} href="javascript:;" >{v}</a></li>);
        });

        let prePage;
        if(!first){
            prePage = (
                <li>
                    <a  onClick={()=>that.goToPage(pageNumber-2)} href="javascript:;" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            );
        }else{
            prePage = (
                <li className="disabled">
                    <a href="javascript:;" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            );
        }

        let lastPage;
        if(!last){
            lastPage = (
                <li>
                    <a  onClick={()=>that.goToPage(pageNumber)} href="javascript:;" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            );
        }else{
            lastPage = (
                <li className='disabled'>
                    <a href="javascript:;" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            );
        }
        return (
            <ul class="pagination">
                {prePage}
                 {pages}
                {lastPage}
            </ul>
        );
    }

    render(){
        return (
            <div style={{width:'90%',margin:'10px auto',height:'40px'}}>
                <nav style={{float:'right'}}>
                    {this.showPages()}
                </nav>
            </div>
        );
    }
}

Pager.propTypes = {
    pageChange: PropTypes.func.isRequired,
    pageInfo: PropTypes.object.isRequired,
};

export default Pager;